<template>
  <div class="article_page">
    <div class="common_form_search">
      <el-form
        :inline="true"
        :model="articleFrom"
      >
        <el-form-item label="文章标题">
          <el-input
            v-model="articleFrom.article_title"
            placeholder="请输入文章标题"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="articleFrom.status"
            placeholder="全部"
            clearable
          >
            <el-option
              label="已发布"
              value="1"
            ></el-option>
            <el-option
              label="未发布"
              value="2"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布平台栏目">
          <el-select
            v-model="articleFrom.parentid"
            placeholder="全部"
            clearable
          >
            <el-option
              v-for="item in topTypeList"
              :key="item.id"
              :label="item.type_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间">
          <my-date-picker ref="myDatePicker"></my-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="onSubmit()"
          >查询</el-button>
          <el-button
            size="small"
            @click="onReset()"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider></el-divider>
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon
          style="margin-right:15px"
          icon-class="list"
          :size="15"
        />数据列表
      </h5>
      <el-button
        v-if="$hasMethod('#add')"
        size="small"
        class="add-btn"
        @click="$router.push({ name: 'articlePlatformAdd', params: { type: 'add' } })"
        icon="el-icon-plus"
      >发布文章</el-button>
    </div>
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="70"
        />
        <el-table-column
          prop="article_title"
          label="文章标题"
          width="260"
        />
        <el-table-column
          prop="type_name"
          label="发布平台栏目"
          width="240"
        />
        <el-table-column
          prop="author"
          label="作者"
        />
        <el-table-column
          prop="publish_time"
          label="发布时间"
          width="100"
        />
    <!--    <el-table-column
          prop="recommend"
          label="推荐"
          width="280"
        > -->
<!--          <template slot-scope="scope">
            <span style="margin-right: 10px">
              <el-button
                v-if="$hasMethod('#enableHome')"
                size="mini"
                :type="scope.row.home_recommend == 1 ? 'primary' : 'info'"
                @click="
                  changeRecommend('home', scope.row.id, scope.row.home_recommend)
                "
              >首页推荐</el-button>
              <el-button
                v-else
                size="mini"
                :type="scope.row.home_recommend == 1 ? 'primary' : 'info'"
              >首页推荐</el-button>
            </span>
            <span>
              <el-button
                v-if="$hasMethod('#enableHot')"
                size="mini"
                :type="scope.row.hot_recommend == 1 ? 'primary' : 'info'"
                @click="
                  changeRecommend('hot', scope.row.id, scope.row.hot_recommend)
                "
              >热门推荐</el-button>
              <el-button
                v-else
                size="mini"
                :type="scope.row.hot_recommend == 1 ? 'primary' : 'info'"
              >热门推荐</el-button>
            </span>
          </template> -->
        <!-- </el-table-column> -->
<!--        <el-table-column
          prop="platform"
          label="展示平台"
          width="120"
        >
          <template slot-scope="scope">
            <p class="show_icons">
              <span
                v-if="scope.row.pc_show==1"
                class="inline-block pc_icon"
              ></span>
              <span
                v-if="scope.row.h5_show==1"
                class="inline-block h5_icon"
              ></span>
              <span
                v-if="scope.row.xcx_show==1"
                class="inline-block xcx_icon"
              ></span>
            </p>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="status"
          label="状态"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="$hasMethod('#enable')"
              class="pointer"
              :type="scope.row.status == 1 ? 'success' : 'danger'"
              @click="changeRecommend('status', scope.row.id, scope.row.status)"
            >{{ scope.row.status == 1 ? "已发布" : "未发布" }}</el-tag>
            <el-tag
              v-else
              :type="scope.row.status == 1 ? 'success' : 'danger'"
            >{{ scope.row.status == 1 ? "已发布" : "未发布" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="180"
        >
          <template slot-scope="scope">
            <el-button
              v-if="$hasMethod('#edit')"
              @click="
                $router.push({
                  name: 'articlePlatformAdd',
                  params: { type: 'edit', editId: scope.row.id },
                })
              "
              type="primary"
              size="mini"
            >编辑</el-button>
            <el-button
              v-if="$hasMethod('#delete')"
              @click="handleBtn(scope.row.id)"
              type="danger"
              size="mini"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <custom-page
        ref="customPage"
        :total="total"
        @getList="getTableLists(searchObj)"
      ></custom-page>
    </div>
  </div>
</template>

<script>
import { getInfoTypeList } from "@/api/web";
import customPage from "@/components/customPage";
import myDatePicker from "@/components/myDatePicker";
import {
  getArticleList,
  delArticle,
  editHome,
  editHot,
  editStatus,
} from "@/api/article";
export default {
  components: { customPage, myDatePicker },
  data() {
    return {
      articleFrom: {
        article_title: "",
        status: "",
        parentid: "",
        publish_time: "",
      },
      topTypeList: [],
      tableData: [],
      total: 0,
      handleId: "",
      searchObj: {},
    };
  },
  mounted() {
    this.getTopType();
    this.getTableLists();
  },
  methods: {
    getTopType() {
      getInfoTypeList().then((res) => {
        this.topTypeList = res;
      });
    },
    getTableLists(articleFrom) {
      const { page, pageSize } = this.$refs.customPage;
      let obj = {
        page,
        pageSize,
        ...articleFrom,
      };
      getArticleList(obj).then((res) => {
        this.tableData = res.data;
        this.total = res.total;
      });
    },
    changeRecommend(type, id, recommend) {
      if (type == "home") {
        editHome({ id: id, home_recommend: recommend == 1 ? "2" : "1" }).then(
          (res) => {
            this.getTableLists();
          }
        );
      } else if (type == "hot") {
        editHot({ id: id, hot_recommend: recommend == 1 ? "2" : "1" }).then(
          (res) => {
            this.getTableLists();
          }
        );
      } else {
        editStatus({ id: id, status: recommend == 1 ? "2" : "1" }).then(
          (res) => {
            this.getTableLists();
          }
        );
      }
    },
    handleBtn(id) {
      this.$confirm('您确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        delArticle(id).then((res) => {
          this.getTableLists();
        });
      }).catch(() => { });
    },
    onSubmit() {
      const pickerVal = this.$refs.myDatePicker.getVal();
      if (pickerVal !== 'error') {
        this.articleFrom.publish_time = pickerVal;
        this.searchObj = { ...this.articleFrom };
        this.$refs.customPage.page = 1;
        this.getTableLists(this.searchObj);
      }
    },
    onReset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset();
      }
      this.articleFrom = Object.assign({});
      this.getTableLists();
    }
  },
};
</script>

<style lang="scss" scoped>
.content_wrap .el-range-editor.el-input__inner {
  width: 400px;
}
.el-tag.el-tag--success {
  background-color: #e8f5ee;
  border-color: #4cca86;
  color: #4cca86;
}
.el-tag.el-tag--danger {
  background-color: #ffeaec;
  border-color: #ff4146;
  color: #ff4146;
}
.table_titlle {
  height: 70px;
  line-height: 70px;
  span {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    margin: 0 50px 0 15px;
  }
}
.show_icons {
  line-height: 24px;
  span {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .pc_icon {
    background-image: url("../../assets/images/pc.png");
  }
  .h5_icon {
    background-image: url("../../assets/images/h5.png");
  }
  .xcx_icon {
    background-image: url("../../assets/images/alipay-xcx.png");
  }
}
</style>
